<template>
  <div class="login-page-config-wrap">
    <div v-loading="loading">
      <div class="operator-bar">
        <el-button :disabled="!data" :loading="btnLoading" type="primary" size="small" class="config-btn" @click="handleSubmit">保存</el-button>
      </div>
      <el-input
        v-model="data"
        autosize
        type="textarea"
        placeholder="请输入内容" />
    </div>
  </div>
</template>

<script>
import { getLoginPageConfig, editLoginPageConfig } from '@/api/login';
import { debounce } from '@/utils';
export default {
  data() {
    return {
      data: '',
      loading: false,
      btnLoading: false
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSubmit: debounce(function() {
      this.btnLoading = true;
      const params = {
        data: this.data
      };
      editLoginPageConfig(params).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功');
          this.btnLoading = false;
        }
      }).catch(err => {
        this.btnLoading = true;
        console.error(err.message);
      });
    }, 500),
    fetchData() {
      this.loading = true;
      getLoginPageConfig().then(res => {
        if (res.data) {
          this.data = res.data;
          this.loading = false;
        }
      }).catch(err => {
        this.loading = false;
        console.error(err.message);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-page-config-wrap {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 24px 55px 24px;
  min-height: calc(100vh - 80px);
  .operator-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
}
</style>
